<template>
  <div>
    <h3>
      这是电影页面 - <button @click="goToDetail">详情</button> -
      <button @click="goToVideo">视频</button>
    </h3>
    <p>
      <router-link to="/home/hot">热映</router-link> |
      <router-link to="/home/wait">待映</router-link> |
      <router-link to="/home/classic">经典电影</router-link>
    </p>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    goToDetail() {
      // 编程式导航
      this.$router.push("/detail/5");
      // 等价于
      // this.$router.push({
      //   path: "/detail",
      //   params: {
      //     id: 5,
      //   },
      // });
      // 等价于
      // this.$router.push({
      //   name: "detail",
      //   params: {
      //     id: 5,
      //   },
      // });

      // this.$router表示整个路由实例，一般用来做页面跳转
      // console.log(this.$router);
    },
    goToVideo() {
      this.$router.replace("/video");
    },
  },
};
</script>

<style scoped></style>
